<template>
	<div class="layout-padding-auto layout-padding-view">
		<!--查询表单-->
		<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
			<el-form-item :label="$t('equipment.eqprunTime')" >
				<el-date-picker
					style="width: 300px"
					v-model="state.queryForm.checkTime"
					type="daterange"
					@change="changeCheckTime"
					range-separator="To"
					value-format="YYYY-MM-DD HH:mm:ss"
					start-placeholder="StartTime"
					end-placeholder="Endtime"
				/>
			</el-form-item>

			<el-form-item :label="$t('equipment.equipmentCode')">
				<el-input style="width: 200px;" v-model="state.queryForm.equipmentCode" clearable :placeholder="$t('equipment.equipmentCode')" />
			</el-form-item>
			<el-form-item :label="$t('equipment.eqpProcesses')">
				<div style="display: inline-block; margin-left: 20px">
					<el-select v-model="state.queryForm.processCode" multiple collapse-tags :placeholder="$t('equipment.eqpProcesses')" style="width: 150px">
						<el-option v-for="item in optionsP" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" @click="getDataList">查询</el-button>
				<el-button icon="refresh"  @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!--查询结果的列表-->
		<el-table
			:data="state.dataList"
			highlight-current-row
			v-loading="state.loading"
			border
			style="width: 100%; height: 100%"
			:cell-style="tableStyle.cellStyle"
			stripe
			:header-cell-style="tableStyle.headerCellStyle"
			@row-click="clickRow"
			@selection-change="selectionChangeHandle"
		>
			>
			<el-table-column prop="equipmentCode" :label="$t('equipment.equipmentName')"/>
			<el-table-column prop="equipmentName" :label="$t('equipment.equipmentName')" />
			<el-table-column prop="equipmentSpc" :label="$t('equipment.equipmentSpc')" />
			<el-table-column prop="eqpProcesses" :label="$t('equipment.eqpProcesses')" />
			<el-table-column prop="eqpState" :label="$t('equipment.eqpState')" />
			<el-table-column prop="eqprunTime" :label="$t('equipment.eqprunTime')" />
			<el-table-column prop="remark" :label="$t('equipment.remark')" />
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {useI18n} from 'vue-i18n';
//import{getSelectEQP}from"/@/api/platform/qms/qmsCheckReport";

const queryRef = ref();
const locationRef = ref();
const { t } = useI18n();
const formatDate = (date: Date): string => {
	console.log(date);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`;
};

// 设备表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	// queryForm: {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())},
	queryForm: {},

	//pageList: getFqcPageSet
});

//  table hook
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle } = useTable(state);

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

//时间点击
const changeCheckTime = (data) => {
	state.queryForm.checkStartTime = data[0];
	state.queryForm.checkEndTime = data[1];
};

// 点击行的时候触发
const clickRow = (row: any) => {
	locationRef.value.query(row);
};

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	// state.queryForm = {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())}
	state.queryForm = {};
	// 清空多选
	selectObjs.value = [];
	getDataList();
};
</script> -->
